<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试随机</title>
		<style>
			* {
				padding:0;margin:0;list-style: none;
			}
			html,body {
				width:100%;
			}
			#tabBox {
				width:200px;margin:0 auto;
			}
			.isActive {
				color:red;background-color: #FF0000;border: 2px solid #C30C22;
			}
		</style>
	</head>
	<body>
		<div style="margin:20px auto;width:300px;height:auto;">
			<button id="reset">重新开始</button>
			<ul>
				<li >分数：<input type="text" disabled value="0" id="result"></li>
				<li>时间：<input type="text" disabled value="0" id="time"></li>
			</ul>
		</div>
		<table id="tabBox">
			
		</table>
		
		<script>
			var tab =document.getElementById('tabBox');
			var reset =document.getElementById('reset');
			var start =false;
			var result =document.getElementById('result');
			var time =document.getElementById('time');
			var Mine =function (tr,td) {
				this.tr =tr;
				this.td =td;
				this.tds =[];
				this.grade =0;
				that =this;
			}
			
			Mine.prototype.build =function () {
				for(var i=0;i<this.tr;i++) {
					
					var tabTr =document.createElement('tr');
					for(var j=0;j<this.td;j++) {
						var tabTd =document.createElement('td');
						tabTd.innerHTML ="<input type='radio' />"
						tabTr.appendChild(tabTd);
					}
					tab.appendChild(tabTr);
				}
				this.tds =tab.getElementsByTagName('input');
				for(let i=0;i<this.tds.length;i++) {
					this.tds[i].name ="xuanze";
					this.tds[i].disabled =true;
				}
			}
			
			
			Mine.prototype.init	=function() {
				this.build();
				// var that =this;
				//判断，游戏重新开始，可以点击单选框
					reset.onclick =this.contrl;
					
			}
			
			Mine.prototype.begin =function () {
				var squareC =new Array(this.tds.length);
					for(let i=0;i<this.tds.length;i++) {
						squareC[i] =i;
					}
					//随机排序
					squareC.sort(function() {
						return 0.5-Math.random()
					})
					return squareC[0];
				}
			
			
			
			Mine.prototype.contrl =function() {
				//归零
				if( start ==true) {
					location.reload();
					return;
				}
				start =true;
				that.grade =0;
				result.value =that.grade;
				
				// console.log(that);
				
				//开启点击
				for(let i=0;i<that.tds.length;i++) {
				
					that.tds[i].disabled =false;
				}
				// 点击开始了,随机让一个选框进入勾选状态
				let bb =that.begin();
				that.tds[bb].checked =true;
				that.tds[bb].className ="isActive";
				
				
				
				for(let i=0;i<that.tds.length;i++) {
					that.tds[i].onclick =function () {
						if(this.className =="isActive") {
							//开始判断--被选中的是checked--正确，加一分；进行下一个随机选框
							that.grade ++;
							result.value =that.grade;
							
							this.checked =false;
							this.className ="";
							let cc =that.randomDate(i);
							that.tds[cc].checked =true;
							that.tds[cc].className ="isActive";
							let aa =i+1;
							// console.log("对了，第"+aa+"个");
						} else {
							//选择错误，扣一分
							that.grade --;
							result.value =that.grade;
							
							this.checked =false;
							this.className ="";
							let cc =that.randomDate(i);
							that.tds[cc].checked =true;
							that.tds[cc].className ="isActive";
							// console.log("错了");
						}
					}
				// 	if(that.tds[i].checked ==true) {
				// 		that.tds[i].onclick =function() {
				// 					that.grade +=1;
				// 					result.value =that.grade;
									
				// 					this.checked =false;
				// 					that.tds[that.randomDate(i)].checked =true;
									
				// 		}
				// 	} else if(!that.tds[i].checked) {
				// 		that.tds[i].onclick =function() {
				// 					that.grade -=1;
				// 					result.value =that.grade;
									
				// 					this.checked =false;
				// 					that.tds[that.randomDate(i)].checked =true;
									
				// 	}
				// }
			}
			
			//计时器开启
			time.value  =30;
			var timeOut =setInterval(function() {
				if(time.value ==0){
					clearInterval(timeOut);
					alert("游戏结束，菜鸡\n得分"+that.grade);
					location.reload();
				} else {
					time.value --;
				}
			},1100)
			}
			
			
			
			
			
			
			Mine.prototype.randomDate =function (e) {
				var square =new Array(this.tds.length);
				for(let i=0;i<this.tds.length;i++) {
					square[i] =i;
					if(i ==e) {
						square[i] ="wan";
						continue;
					}
				}
				//随机排序
				square.sort(function() {
					return 0.5-Math.random()
				});
				if(square[0] =="wan"){
					return square[1];
				}
				return square[0];
			}
			
			
			var mine =new Mine(6,10);
			mine.init();
		</script>
	</body>
</html>
